<template>
  <xdh-dialog-form :mode="mode" :title="title" :model="model" :rules="rules" :closed.sync="closed" :on-insert="onInsert" :on-update="onUpdate" :width="'1000px'" :label-width="'120px'" :max-height="'98%'" class="dialog-con" @open="openDialog">
    <template slot-scope="scope">
      <div class="dialog-con">
        <el-row style="text-align:center;">
          <h4>
            基本信息
          </h4>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="scope.model.name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="scope.model.sex" size="small">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="国籍" prop="country">
              <el-input v-model="scope.model.country" size="small"></el-input>
            </el-form-item>
            <el-form-item label="护照号" prop="passno">
              <el-input v-model="scope.model.passno" size="small"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker v-model="scope.model.birthday" type="date" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align:center;">
            <img class="head-image" :src="'/static/img/head.png'" />
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否在厦门" prop="area">
              <el-radio-group v-model="scope.model.area" size="small">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管辖单位" prop="org">
              <el-input v-model="scope.model.org" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="户籍详细地址" prop="addr">
              <el-input type="textarea" v-model="scope.model.addr" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="居住地详细地址" prop="live">
              <el-input type="textarea" v-model="scope.model.live" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分组" prop="group">
              <el-select filterable v-model="scope.model.group" placeholder="请选择">
                <el-option v-for="item in groups" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="级别" prop="level">
              <el-select filterable v-model="scope.model.level" placeholder="请选择">
                <el-option v-for="item in levels" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input size="small" type="textarea" :rows="3" v-model="model.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </template>
  </xdh-dialog-form>
</template>
<script>
  import XdhDialogForm from '@/widgets/xdh-dialog-form';
  import groupMixin from '@/base/mixin/group';
  import levelMixin from '@/base/mixin/level';
  export default {
    mixins: [groupMixin, levelMixin],
    components: {
      XdhDialogForm
    },
    props: {
      title: String,
      mode: String,
      closed: {
        type: Boolean,
        default: false
      },
      model: {
        type: Object,
        default() {
          return {};
        }
      },
      rules: {
        type: Object,
        defalut() {
          return {};
        }
      },
      onInsert: Function,
      onUpdate: Function
    },
    watch: {
      closed(val) {
        this.$emit('update:closed', val);
      }
    },
    data() {
      return {
        groups: [],
        levels: []
      };
    },
    methods: {
      openDialog() {
        if (this.groups.length === 0) {
          this.setGroups();
        }
        if (this.levels.length === 0) {
          this.setLevels();
        }
      },
      setGroups() {
        this.fetchGroup().then(res => {
          res.list.forEach((r, idx) => {
            this.groups.push({
              label: r.name,
              value: r.id
            });
          });
        });
      },
      setLevels() {
        this.fetchLevel().then(res => {
          res.list.forEach((r, idx) => {
            this.levels.push({
              label: r.name,
              value: r.id
            });
          });
        });
      }
    }
  };
</script>
<style  type="text/scss" lang="scss" scoped>
  .head-image {
    margin: 0 15px;
  }
  .dialog-con {
    padding: 0 20px;
    .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>